<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>气死人</title>
    <script src="jquery.js"></script>
    <script src="qisiren.js"></script>
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        let pais = ["大", "小", "2", "A", "K", "Q", "J", "10", "9", "8", "7", "6", "5", "4", "3"];
        let shunxu = [0, 1, 2, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3];

        function qs(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            let r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        $(function () {
            if (location.href.indexOf("pid") < 0) {
                $.get("wx/getauthurl", function (rs) {
                    location.replace(rs);
                });
                return;
            }
            let host = decodeURIComponent(qs("host"));
            window.playerId = qs("pid");
            let gaming = false;
            let sdk = new qisiren(host);
            sdk.onAdd = function (pid, name, isReady) {
                let li = $("<li/>").attr("pid", pid).appendTo("#userlist");
                let s = $("<span/>").appendTo(li);
                $("<label/>").text(isReady ? "[已准备]" : "").appendTo(s);
                $("<i/>").text(name).appendTo(s);
                $("<ol/>").appendTo(li);
            };
            sdk.onLeave = function (pid) {
                let li = $("#userlist li[pid=" + pid + "]");
                let i = li.find("i");
                if (gaming) {
                    let name = i.text();
                    if (name.indexOf("<") < 0) {
                        i.text(name + " <已离线>");
                    }
                } else {
                    li.remove();
                }
            };
            sdk.onReady = function (pid, isReady) {
                let dom = $("#userlist li[pid=" + pid + "]").find("label");
                if (isReady) {
                    dom.text("[已准备]");
                } else {
                    dom.text("");
                }
            };
            sdk.onIndex = function (list) {
                gaming = true;
                $("#btns li").hide();
                $("#btns").show();
                let plist = [];
                for (let i = 0; i < list.length; i++) {
                    let n = list[i];
                    plist[n.index] = $("#userlist li[pid=" + n.pid + "]").eq(0);
                }
                $("#userlist li").remove();
                for (let i = 0; i < plist.length; i++) {
                    $("#userlist").append(plist[i]);
                }
                $("#userlist li label").text("[0]")
            };
            sdk.onXinpai = function (pai) {
                $("<li/>").attr("pai", pai).text(pais[pai]).appendTo("#shoupai");
                paixu($("#shoupai"));
                setchupai();
            }
            sdk.onPaishu = function (pid, count) {
                let lbl = $("#userlist li[pid=" + pid + "]").find("label");
                lbl.text("[" + count + "]");
                if (count <= 3) {
                    lbl.css("color", "red");
                } else {
                    lbl.css("color", "");
                }
            }
            sdk.onActive = function (pid, isTake) {
                if (isTake) {
                    $("#userlist li>ol>li").remove();
                }
                if (pid === playerId) {
                    $("#lblMsg").hide();
                    if (isTake) {
                        $("#btnChupai").css("width", "100%").show();
                    } else {
                        $("#btnChupai").css("width", "50%").show();
                        $("#btnPass").show();
                    }
                } else {
                    let name = $("#userlist li[pid=" + pid + "]").find("i").text();
                    $("#btns li").hide();
                    $("#lblMsg").text("等待：" + name).show();
                }
            }
            sdk.onReload = function (pais) {
                $("#shoupai li").remove();
                $.each(pais, function (i, n) {
                    sdk.onXinpai(n);
                });
            }
            sdk.onChupai = function (pid, pais) {
                let ol = $("#userlist li[pid=" + pid + "]").find("ol");
                ol.find("li").remove();
                for (let i = 0; i < pais.length; i++) {
                    let p = pais[i];
                    $("<li/>").attr("pai", p).text(pais[p]).appendTo(ol);
                }
                paixu(ol);
            };
            sdk.onGameOver = function (data) {
                for (let i = 0; i < data.shoupai.length; i++) {
                    let n = data.shoupai[i];
                    let u = $("#userlist li[pid=" + n.pid + "]");
                    let ol = u.find("ol");
                    ol.find("li").remove();
                    u.find("label").text("[" + n.pais.length + "]");
                    for (let i2 = 0; i2 < n.pais.length; i2++) {
                        $("<li/>").attr("pai", n.pais[i2]).text(pais[n.pais[i2]]).appendTo(ol);
                    }
                    paixu(ol);
                }
                let name = $("#userlist li[pid=" + data.winner + "]").find("i").text();
                alert(name + " 获胜!");
                $("#btns li").hide();
                $("#btnReady,#btnLeave").show();
                $("#shoupai li").remove();
            };
            sdk.onVoice = function (pid, vid) {
                let ui = $("#userlist li[pid=" + pid + "]").find("i");
                let name = ui.text();
                if (name.indexOf("(") < 0) {
                    ui.attr("pname", name);
                    ui.text(name + "(语音中)");
                }
                ui.addClass("voice");
                wx.downloadVoice({
                    serverId: vid, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
                    isShowProgressTips: 0, // 默认为1，显示进度提示
                    success: function (res) {
                        wx.playVoice({
                            localId: res.localId // 需要播放的音频的本地ID，由stopRecord接口获得
                        })
                    }
                });
            };
            wx.onVoicePlayEnd({
                success: function () {
                    let ui = $("i.voice");
                    ui.text(ui.attr("pname"));
                }
            })
            let setchupai = function () {
                $("#shoupai li").click(function () {
                    if ($("#btnChupai:visible").length === 0) {
                        return;
                    }
                    let pai = parseInt($(this).attr("pai"));
                    let ischk = $(this).hasClass("checked");
                    if (ischk) {
                        $(this).removeClass("checked");
                        if (pai === 0 || pai === 1) {
                            $(this).text(pais[pai]);
                            $(this).attr("rep_attr", "");
                        }
                    } else if (pai === 0 || pai === 1) {
                        $("#xpdom").attr("idx", $(this).prevAll().length).show();
                    } else {
                        $(this).addClass("checked");
                    }
                });
            }
            let paixu = function (ul) {
                let list = {};
                $(ul).find("li").each(function (i, n) {
                    let p = $(n).attr("pai");
                    list[p] = list[p] ? list[p] + 1 : 1;
                });
                $(ul).find("li").remove();
                for (let i = 0; i < shunxu.length; i++) {
                    let s = shunxu[i];
                    for (let c = 0; c < list[s]; c++) {
                        $("<li/>").attr("pai", s).text(pais[s]).appendTo(ul)
                    }
                }
            }
            let joinGame = function (gid) {
                sdk.add(gid, function () {
                    $("#waiting").hide();
                    $("#gaming").show().attr("gid", gid);
                    $("#btns li").hide();
                    $("#btns").show();
                    $("#userlist li").remove();
                    $("#btnReady,#btnLeave").show();
                });
            };
            $("#btnChupai").click(function () {
                let list = [];
                let wang = [];
                $("#shoupai li.checked").each(function (i, n) {
                    let p = parseInt($(n).attr("pai"));
                    if (p === 0 || p === 1) {
                        let rp = parseInt($(n).attr("rep_pai"));
                        wang.push(p + "_" + rp);
                    } else {
                        list.push(p)
                    }
                });
                sdk.chupai(list.join(","), wang.join(","), function (rs) {
                    if (rs.success) {
                        $("#shoupai li.checked").remove();
                    } else {
                        alert(rs.msg);
                    }
                });
            });
            $("#btnNewGame").click(function () {
                sdk.newGame(function (rs) {
                    joinGame(rs.data);
                });
            });
            $("#btnChangeName").click(function () {
                let name = prompt("请输入昵称");
                if (name !== null && name.trim().length > 0) {
                    sdk.setNickname(name, function (rs) {
                        localStorage.setItem("nickname", rs.data);
                    });
                }
            });
            $("#btnReloadGame").click(function () {
                sdk.gamelist(function (rs) {
                    $("#gamelist li").remove();
                    for (let i = 0; i < rs.data.length; i++) {
                        let g = rs.data[i];
                        let li = $("<li/>").attr("gid", g.id).appendTo("#gamelist");
                        $("<span/>").text(g.name).appendTo(li);
                        $("<label/>").text("人数：" + g.pc).appendTo(li);
                        li.click(function () {
                            let gid = $(this).attr("gid");
                            joinGame(gid);
                        });
                    }
                });
            });
            $("#btnLeave").click(function () {
                sdk.leave(function () {
                    $("#waiting").show();
                    $("#gaming").hide();
                    $("#btnReloadGame").click();
                });
            });
            $("#btnReady").click(function () {
                sdk.ready(true, function () {
                    $("#btnReady").hide();
                    $("#btnCReady").show();
                    $("#userlist li[pid=" + playerId + "]>ol>li").remove();
                });
            });
            $("#btnCReady").click(function () {
                sdk.ready(false, function () {
                    $("#btnReady").show();
                    $("#btnCReady").hide();
                });
            });
            $("#xplist li").click(function () {
                let idx = $("#xpdom").attr("idx");
                let btn = $("#shoupai li").eq(parseInt(idx));
                $(btn).addClass("checked").text($(this).text()).attr("rep_pai", $(this).attr("pai"));
                $("#xpdom").hide();
            });
            $("#xpdom").click(function () {
                $("#xpdom").hide();
            });
            $("#btnPass").click(function () {
                sdk.pass();
            });
            $("#btnVoice").bind("mousedown touchstart", function () {
                $(this).addClass("push");
                $(this).text("松开 发送");
                wx.startRecord();
            });
            $("#btnVoice").bind("mouseup touchend", function () {
                wx.stopRecord({
                    success: function (res) {
                        alert(res.localId);
                        wx.uploadVoice({
                            localId: res.localId,
                            isShowProgressTips: 0,
                            success: function (res) {
                                sdk.voice(res.serverId, function () {
                                    $(this).removeClass("push");
                                    $(this).text("按住 说话");
                                });
                            }
                        });
                    }
                });
            });
            $("#btnVoice").hide();
            wx.ready(function () {
                let name = localStorage.getItem("nickname");
                if (name === null) {
                    name = prompt("请输入昵称");
                    if (name === null || name.length < 1) {
                        name = "不会打字的人";
                    }
                }
                sdk.login(playerId, name, function (rs) {
                    if (rs.success === false) {
                        alert(rs.msg);
                        return;
                    }
                    if ("ok" === rs.data) {
                        localStorage.setItem("nickname", name);
                        $("#waiting").show();
                        $("#btnReloadGame").click();
                        wx.startRecord({
                            success: function () {
                                wx.stopRecord();
                            }
                        });
                    } else {
                        joinGame(rs.data);
                    }
                });
            });
            let url = decodeURIComponent(location.href);
            $.get(host + "/wx/jsconfig?url=" + url, function (data) {
                data.jsApiList = ["startRecord", "stopRecord", "playVoice", "onVoicePlayEnd", "uploadVoice", "downloadVoice"];
                wx.config(data);
            });
        });
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #userlist li span i {
            font-style: normal;
        }

        #btns {
            width: 100%;
            display: none;
            position: fixed;
            bottom: 40px;
        }

        #btns li {
            list-style: none;
            display: block;
            width: 50%;
            float: left;
            color: #0000ee;
            text-decoration: underline;
            text-align: center;
            padding: 20px 0;
        }

        #gamelist {
            padding: 0;
            margin: 0;
        }

        #gamelist li {
            line-height: 40px;
            position: relative;
            border-bottom: solid 2px #ccc;
        }

        #gamelist span {
            padding-left: 15px;
        }

        #gamelist label {
            position: absolute;
            right: 30px;
        }

        #waiting p {
            display: block;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }

        #waiting p > a {
            display: block;
            float: left;
            padding: 20px 0;
            text-align: center;
            width: 33.33%;
        }

        #userlist {

        }

        #userlist li {
            list-style: none;
            line-height: 40px;
            position: relative;
            border-bottom: solid 1px #ccc;
        }

        #userlist li label {
            padding: 0 10px;
        }

        #userlist li span {
            display: block;
        }

        #userlist li ol {
            display: block;
            margin-left: 40px;
            clear: both;
            overflow: hidden;
            padding-bottom: 5px;
        }

        #userlist li ol li {
            width: 2em;
            line-height: 2.3em;
            height: 2.3em;
            text-align: center;
            font-size: 15px;
            display: block;
            float: left;
            border: solid 1px #efefef;
        }

        #shoupai {
            position: fixed;
            bottom: 70px;
            left: 15px;
            right: 15px;
            overflow: hidden;
        }

        #shoupai li {
            width: 1.8em;
            text-align: center;
            font-size: 18px;
            display: block;
            float: left;
            line-height: 2em;
            height: 2em;
            border: solid 1px #efefef;
        }

        #shoupai li.checked {
            background-color: cornflowerblue;
            color: white;
        }

        #xpdom {
            display: none;
            position: fixed;
            z-index: 900;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        #mask {
            position: relative;
            left: 0;
            top: 0;
            z-index: 900;
            width: 100%;
            height: 100%;
            background-color: #393939;
            opacity: 0.8;
        }

        #xplist {
            position: absolute;
            z-index: 901;
            background-color: #efefef;
            width: 80%;
            left: 7.5%;
            top: 20%;
            overflow: hidden;
            padding-top: 30px;
            padding-right: 0px;
            padding-left: 25px;
            padding-bottom: 5px;
        }

        #xplist li {
            list-style: none;
            display: block;
            float: left;
            width: 50px;
            height: 65px;
            line-height: 65px;
            border: solid 1px #ccc;
            text-align: center;
            margin-right: 20px;
            margin-bottom: 25px;
        }

        #btnVoice {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            color: #333;
            background-color: #efefef;
        }

        #btnVoice.push {
            background-color: #ccc;
        }

        .disableSelect {
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
        }
    </style>
</head>
<body class="disableSelect">
<div id="waiting" style="display: block">
    <ul id="gamelist" style="display: block">
    </ul>
    <p>
        <a id="btnNewGame" href="javascript:;">创 建</a>
        <a id="btnChangeName" href="javascript:;">修改昵称</a>
        <a id="btnReloadGame" href="javascript:;">刷 新</a>
    </p>
</div>
<div id="gaming" style="display: none">
    <ul id="userlist">
        <li>
            <ol>

            </ol>
        </li>
    </ul>
    <ul id="shoupai">

    </ul>
    <ul id="btns" style="display: block">
        <li id="btnReady">准备游戏</li>
        <li id="btnCReady">取消准备</li>
        <li id="btnLeave">退出房间</li>
        <li id="btnChupai">出 牌</li>
        <li id="btnPass">要不起</li>
        <li id="lblMsg" style="width: 100%;text-decoration:none;color: #7B7B7B;display: none"></li>
    </ul>
    <div id="btnVoice" class="disableSelect" onselectstart="return false;" unselectable="on">按住 说话</div>
    <div id="xpdom">
        <ul id="xplist">
            <li pai="2">2</li>
            <li pai="3">A</li>
            <li pai="4">K</li>
            <li pai="5">Q</li>
            <li pai="6">J</li>
            <li pai="7">10</li>
            <li pai="8">9</li>
            <li pai="9">8</li>
            <li pai="10">7</li>
            <li pai="11">6</li>
            <li pai="12">5</li>
            <li pai="13">4</li>
            <li pai="14">3</li>
        </ul>
        <div id="mask"></div>
    </div>
</div>
</body>
</html>